<template>
    <el-card class="box-card">
        <!-- 顶部 -->
        <div slot="header" class="clearfix">
            <!-- 头部左侧内容 -->
            <el-tabs v-model="activeName" @tab-click="handleClick" class="tab">
                <el-tab-pane label="销售额" name="sale"></el-tab-pane>
                <el-tab-pane label="访问量" name="visite"></el-tab-pane>
            </el-tabs>
            <!-- 头部右侧内容 -->
            <div class="right">
                <span @click="setToday">今日</span>
                <span @click="setWeek">本周</span>
                <span @click="setMonth">本月</span>
                <span @click="setYear">本年</span>
                <el-date-picker
                    v-model="date"
                    class="date"
                    type="daterange"
                    range-separator="-"
                    size="mini"
                    value-format="yyyy-MM-dd"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </div>
        </div>
        <!-- 内容 -->
        <div>
            <el-row>
                <el-col :span="18">
                    <!-- 容器 -->
                    <div class="charts" ref="charts"></div>
                </el-col>
                <el-col :span="6">
                    <h3>门店{{ title }}排名</h3>
                    <ul >
                        <li>
                            <span class="liIndex">0</span>
                            <span class="liIndexName">肯德基</span>
                            <span class="liNum">323,234</span>
                        </li>
                        <li>
                            <span class="liIndex">1</span>
                            <span class="liIndexName">肯德基</span>
                            <span class="liNum">323,234</span>
                        </li>
                        <li>
                            <span class="liIndex">2</span>
                            <span class="liIndexName">肯德基</span>
                            <span class="liNum">323,234</span>
                        </li>
                        <li>
                            <span class="liPuTong">3</span>
                            <span class="liNamePuTong">肯德基</span>
                            <span class="liNum">323,234</span>
                        </li>
                        <li>
                            <span class="liPuTong">4</span>
                            <span class="liNamePuTong">西贝筱面村</span>
                            <span class="liNum">223,445</span>
                        </li>
                        <li>
                            <span class="liPuTong">5</span>
                            <span class="liNamePuTong">肯德基</span>
                            <span class="liNum">323,234</span>
                        </li>
                        <li>
                            <span class="liPuTong">6</span>
                            <span class="liNamePuTong">肯德基</span>
                            <span class="liNum">323,234</span>
                        </li>
                        <li>
                            <span class="liPuTong">7</span>
                            <span class="liNamePuTong">肯德基</span>
                            <span class="liNum">323,234</span>
                        </li>
                    </ul>
                </el-col>
            </el-row>
        </div>
    </el-card>
</template>

<script>
// 引入echarts
import * as echarts from 'echarts'
// 引入dayjs
import dayjs from 'dayjs'
import {mapState} from 'vuex'
export default {
    name: "Sale",
    data(){
        return {
            // 用户点击了销售额还是访问量，默认是销售额
            activeName:'sale',
            myChert:'',
            // 收集用户点击的时间
            date:[],
        }
    },
    mounted() {
        // 初始化echarts实例
        this.myChert = echarts.init(this.$refs.charts)
        this.myChert.setOption({
            title:{
                text:'销售额趋势'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: [],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: 'Direct',
                    type: 'bar',
                    barWidth: '60%',
                    data: []
                }
            ]
        })
    },
    methods:{
        handleClick(){

        },
        // 获取今日日期
        setToday() {
            const day = dayjs().format('YYYY-MM-DD')
            this.date = [day,day]
        },
        // 获取本周日期
        setWeek() {
            const zhouYi = dayjs().day(1).format('YYYY-MM-DD')
            const zhouRi = dayjs().day(7).format('YYYY-MM-DD')
            this.date = [zhouYi,zhouRi]
        },
        // 获取本月日期
        setMonth() {
            const mStart = dayjs().startOf('month').format('YYYY-MM-DD')
            const mEnd = dayjs().endOf('month').format('YYYY-MM-DD')
            this.date = [mStart,mEnd]
        },
        // 获取本年日期
        setYear() {
            const yStart = dayjs().startOf('year').format('YYYY-MM-DD')
            const yEnd = dayjs().endOf('year').format('YYYY-MM-DD')
            this.date = [yStart,yEnd]
        }
    },
    computed:{
        // 右侧《门店销售额排名》和card中的两个按钮联动
        title() {
            return this.activeName == "sale" ? '销售额' : '访问量'
        },
        // 图表的标题
        titleText() {
            return this.activeName == "sale" ? '销售额趋势' : '访问量'
        },
        ...mapState({
            listData:state => state.home.list
        })
    },
    watch:{
        // 监听title，如果title发生变化，就修改图表的配置信息
        title() {
            // 重新修改图表的标题
            this.myChert.setOption({
                title:{
                    text:this.titleText
                },
                xAxis:{
                    data:this.title == '销售额' ? this.listData.orderFullYearAxis : this.listData.userFullYearAxis
                },
                series: [
                    {
                        name: 'Direct',
                        type: 'bar',
                        barWidth: '60%',
                        data: this.title == '销售额' ? this.listData.orderFullYear : this.listData.userFullYear
                    }
                ]
            })
        },
        // 监听仓库中的数据，一旦有了数据就展示到页面上
        listData(){
            this.myChert.setOption({
                title:{
                    text:'销售额趋势'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.listData.orderFullYearAxis,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: 'Direct',
                        type: 'bar',
                        barWidth: '60%',
                        data: this.listData.orderFullYear
                    }
                ]
            })
        }
    }
}
</script>

<style scoped>
>>> .el-card__header{
    border-bottom: none;
}

.box-card {
    margin: 10px 0;
}
.clearfix {
    position: relative;
    display: flex;
    justify-content: space-between;
}
.tab {
    width: 100%;
}
.right {
    position: absolute;
    right: 0;
}
.date {
    width: 250px;
    margin: 0 20px;
}
.right span {
    margin: 0 10px;
}
.charts {
    width: 100%;
    height: 300px;
}
.el-row .el-col {
    margin: 0;
}
.el-col ul {
    width: 100%;
    height: 300px;
    padding: 0 ;
}
ul li {
    list-style: none;
    height: 10%;

}
.el-col ul li .liIndex{
    float: left;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    background-color: black;
    color: white;
}
.el-col ul li .liPuTong {
    margin-left: 5px;
}
.el-col ul li .liIndexName{
    margin-left: 70px;
}
.el-col ul li .liNamePuTong {
    margin-left: 75px;
}
.el-col ul li .liNum {
    float: right;
    margin-left: 30px;
}
</style>
